<template>
	<div class="container add_edit">
		<el-form :model="form" ref="ruleForm" label-width="50px">
			<el-form-item label="类型">
				<el-radio-group v-model="form.type">
					<el-radio label="网页">网页</el-radio>
					<el-radio label="内容">内容</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="网页" v-show="form.type == '网页'">
				<el-input v-model="form.url"></el-input>
			</el-form-item>
			<el-form-item label="内容" v-show="form.type == '内容'">
				<!-- <div id="wangeditor" class="editor"><div ref="editorElem" style="text-align:left;"></div></div> -->
				<!-- <vue-ueditor-wrap v-model="form.content" editor-id="ueditor" :config="editorConfig"
					@before-init="customMeans"></vue-ueditor-wrap> -->

			</el-form-item>
			<el-form-item>
				<el-button class="confirm_btn" @click="submitForm('ruleForm')">提 交</el-button>
			</el-form-item>
		</el-form>
		
		<uni-popup ref="imgPop">
			<view class="popview" style="">
				<view @click="addImg" class=""
					style="margin: 30rpx; width: 200px; height: 200px; background-color: #fff; display: flex; justify-content: center; align-items: center; flex-direction: column">
					<i class="el-icon-upload" style="font-size: 67px; color: #c0c4cc"></i>
					<div class="el-upload__text" style="color: #409eff; font-style: normal"><em>点击上传图片</em></div>
				</view>
			</view>
		</uni-popup>
		
	</div>
</template>

<script>
	//import E from 'wangeditor';
	const __name = 'ny-app-about';
	// import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module
	export default {
		// components: {
		// 	VueUeditorWrap
		// },
		data() {
			return {
				editorConfig: {},
				dataId: '',
				form: {
					type: '网页',
					url: '',
					content: '',
					state: '启用'
				},
				editor: null
			};
		},
		props: ['catchData'],
		methods: {
			addImg: function() {
				let self = this
				uniCloud
					.chooseAndUploadFile({
						type: 'image'
					})
					.then(res => {
						console.log(res)
						for (let item of res.tempFiles) {
							self.form.content = self.form.content + `<image src=${item.url}></image>`
						}
						self.$refs.imgPop.close()
					})
			},
			customMeans(editorId) {
				let self = this
				window.UE.registerUI(
					'customImgUp 135editor',
					(editor, uiName) => {
						if (uiName == '135editor') {
							var btn = new UE.ui.Button({
								name: 'btn-dialog-' + uiName,
								cssRules: `background-image: url('/static/img/editor-135-icon.png') !important; background-size: contain;`,
								title: '135编辑器',
								onclick: function() {
									// 由于登录存在跨域问题，请使用如下方式调用135编辑器
									var editor135 = window.open(
										'https://www.135editor.com/simple_editor.html?callback=true&appkey='
									)
									window.addEventListener(
										'message',
										function(event) {
											if (typeof event.data !== 'string') {
												if (event.data.ready) {
													editor135.postMessage(editor.getContent(), '*')
												}
												return
											}
											editor.setContent(event.data)
											editor.fireEvent('catchRemoteImage')
										},
										false
									)
								}
							})

							return btn
						} else {
							// 添加自定义按钮用于上传图片
							const btn = new window.UE.ui.Button({
								name: '自定义图片上传',
								title: '图片上传',
								cssRules: `background-image: url('/static/img/editor-img.png') !important; background-size: contain;`,
								onclick() {
									self.$refs.imgPop.open()
								}
							})
							return btn
						}
					},
					undefined /* 指定添加到工具栏上的那个位置，默认时追加到最后 */ ,
					editorId /* 指定这个UI是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */
				)
			},
			initVueEdit() {
				// 这里根据你项目的具体情况设置，我这么设置是针对这个文档网站的
				this.UEDITOR_HOME_URL = process.env.NODE_ENV === 'development' ? '/static/UEditor/' :
					`${process.env.PUBLIC_PATH}UEditor/`
				this.editorConfig = {
					serverUrl: '//a58f1186-042b-4133-a1d8-9cb0c77b3be2.bspapp.com/http/upmedia',
					UEDITOR_HOME_URL: '/static/UEditor/',
					catchRemoteImageEnable: true, // 抓取远程图片
					listiconpath: `${this.UEDITOR_HOME_URL}listicon/`,
					toolbars: [
						[
							'135editor',
							'fullscreen',
							'source',
							'|',
							'undo',
							'redo',
							'|',
							'bold',
							'italic',
							'underline',
							'fontborder',
							'strikethrough',
							'superscript',
							'subscript',
							'removeformat',
							'formatmatch',
							'autotypeset',
							// 'blockquote',
							'pasteplain',
							'|',
							'forecolor',
							'backcolor',
							'insertorderedlist',
							'insertunorderedlist',
							// 'selectall',
							// 'cleardoc',
							'|',
							'rowspacingtop',
							'rowspacingbottom',
							'lineheight',
							'|',
							'customstyle',
							// 'paragraph',
							'fontfamily',
							'fontsize',
							// '|',
							// 'directionalityltr',
							// 'directionalityrtl',
							// 'indent',
							'|',
							'justifyleft',
							'justifycenter',
							'justifyright',
							'justifyjustify',
							// '|',
							// 'touppercase',
							// 'tolowercase',
							'|',
							'link',
							'unlink',
							// 'anchor',
							// '|',
							// 'imagenone',
							// 'imageleft',
							// 'imageright',
							// 'imagecenter',
							'|',
							// 'simpleupload',
							// 'insertimage',
							'emotion',
							// 'scrawl',
							// 'insertvideo',
							// 'music',
							// 'attachment',
							// 'map',
							// 'gmap',
							// 'insertframe',
							// 'insertcode',
							// 'webapp',
							// 'pagebreak',

							// 'background',
							'|',
							'horizontal',
							// 'date',
							// 'time',
							'spechars',
							// 'snapscreen',
							// 'wordimage',
							'|',
							'inserttable',
							'deletetable',
							'insertparagraphbeforetable',
							'insertrow',
							'deleterow',
							'insertcol',
							'deletecol',
							'mergecells',
							'mergeright',
							'mergedown',
							'splittocells',
							'splittorows',
							'splittocols',
							// 'charts',
							'|',
							// 'print',
							// 'preview',
							'searchreplace',
							// 'drafts',
							'help'
						]
					],
					// 编辑器不自动被内容撑高
					autoHeightEnabled: false,
					// 初始容器高度
					initialFrameHeight: 540,
					// 初始容器宽度
					initialFrameWidth: '100%'
					// whiteList 已经在 ueditor.config.js 里改过了，此处略
				}
			},
			async loadData() {
				await this.$db[__name].tofirst().then(res => {
					if (res.code == 200) {
						this.form = res.datas
						// for (let item in this.form) {
						// 	this.form[item] = res.datas[item];
						// }

						this.dataId = res.datas._id;

						// if (res.datas && res.datas.content) {
						// 	this.editor.txt.html(res.datas.content);
						// }
					}
				});
			},
			submitForm(formName) {
				this.$refs[formName].validate((valid, obj) => {
					// 默认获取第一个未验证 form 属性名
					this.$api.set_unvalidated_form_focus(this, obj);
					if (valid) {
						if (!this.dataId) {
							this.$db[__name].add(this.form).then(res => {
								if (res.code == 200) {
									this.$message({
										message: '操作成功',
										type: 'success'
									});
									this.loadData();
								}
							}).catch(err => {
								uni.showModal({
									content: err.message,
									showCancel: false
								})
							});
						} else {
							let obj = this.form
							delete obj._id
							this.$db[__name].update(this.dataId, obj).then(res => {
								if (res.code == 200) {
									this.$message({
										message: '操作成功',
										type: 'success'
									});
									this.loadData();
								}
							}).catch(err => {
								uni.showModal({
									content: err.message,
									showCancel: false
								})
							});
						}
					}
				});
			}
		},
		created() {
			this.loadData();
		},
		mounted() {
			let $this = this;
			if (window.UE) {
				UE.delEditor('ueditor')
			}
			this.initVueEdit()

			// this.editor = new E(this.$refs.editorElem);
			// // 编辑器的事件，每次改变会获取其html内容
			// this.editor.customConfig.onchange = html => {
			// 	// window.console.log(html);

			// 	this.form.content = html;
			// };

			// // 将图片大小限制为 2M
			// this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024;
			// // 限制一次最多上传 10张图片
			// this.editor.customConfig.uploadImgMaxLength = 10;

			// this.editor.customConfig.customAlert = function(info) {
			// 	// info 是需要提示的内容
			// 	alert('自定义提示：' + info);
			// };
			// this.editor.customConfig.customUploadImg = function(files, insert) {
			// 	// files 是 input 中选中的文件列表
			// 	// insert 是获取图片 url 后，插入到编辑器的方法
			// 	for (var i = 0; i < files.length; i++) {
			// 		uniCloud.uploadFile({
			// 			filePath: window.URL.createObjectURL(files[i]),
			// 			cloudPath: files[i].name,
			// 			fail(err) {
			// 				console.log('fail', err);
			// 			},
			// 			success(res) {
			// 				console.log('success', res);
			// 				// 上传代码返回结果之后，将图片插入到编辑器中
			// 				insert(res.fileID);
			// 			}
			// 		});
			// 	}
			// };

			// this.editor.customConfig.menus = [
			// 	// 菜单配置
			// 	'head', // 标题
			// 	'bold', // 粗体
			// 	'fontSize', // 字号
			// 	'fontName', // 字体
			// 	'italic', // 斜体
			// 	'underline', // 下划线
			// 	'strikeThrough', // 删除线
			// 	'foreColor', // 文字颜色
			// 	'backColor', // 背景颜色
			// 	'link', // 插入链接
			// 	'list', // 列表
			// 	'justify', // 对齐方式
			// 	'quote', // 引用
			// 	'emoticon', // 表情
			// 	'image', // 插入图片
			// 	'table', // 表格
			// 	'code', // 插入代码
			// 	'undo', // 撤销
			// 	'redo' // 重复
			// ];
			// this.editor.create(); // 创建富文本实例
		}
	};
</script>

<style>
</style>
